<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1> The JQuery Ajax 01 Page</h1>
    <button onclick="doAjax()">GET获取数据</button>
    <button onclick="doAjaxGet()">GET(简化版)获取数据</button>
    <button onclick="doAjaxPost()">POST获取数据</button>
    <button onclick="doAjaxLoad()">LOAD形式获取数据</button>

    <div id="result">

    </div>

    <script>
        function doAjax(result) {
            //大括号括起来的是对象
            let url = "http://localhost/doAjaxGet";
            let params = "";

            /*封装了ajax的基本步骤,可以更快的开发*/
            $.ajax({        //没有声明请求方式的时候, 默认为get请求
                type : "GET",//可以省略
                url : url,
                date : params,
                // dataType : "json",   指定服务器响应到客户端的数据类型
                // 指定数据类型为json, 不能显示到页面,  也可以改为text, 默认为json
                async : true, //默认为true, 为异步操作
                contentType : "application/x-www-form-urlencoded",      //默认请求头
                success:function (result) {
                    $("#result").html(JSON.stringify(result))
                    console.log(result);
                    // document.getElementById("result").innerHTML = result;
                }


            });
        }
        function doAjaxGet(result) {
            let url = "http://localhost/doAjaxGet";
            let params = "";
            debugger;
            $.get(url, params, function () {
                //在jQuery中, 把result包装成了一个对象, 所以不能直接使用下面的形式直接转换成字符串,
                //解决方法: 1.调用json的方法来转换   , 2. .get加一个参数, "text"
                // $("#result").html(JSON.stringify(result));
                $("#result").html(result);
            }, "text") // text 表示服务器响应到客户端的数据类型
        //    如果是json, 客户端会将其转换为json格式的js对象
        }

        function doAjaxPost() {
            /*let url = "http://localhost/doAjaxPost";
            let params = "id=12&name=电脑&remark=双11最低五折";

            $.ajax({
                type : "POST",
                url : url,
                data : params,
                success:function (result) {
                    console.log(result)
                }

            })*/
            //   参数类型: 1. url   2. params  3. 函数
            $.post("http://localhost/doAjaxPost","id=12&name=电脑&remark=双11最低五折", function (result) {
                console.log(result);
                $("#result").html(result);
            })
        }

        function doAjaxLoad() {
            let url = "/doAjaxGet";
            let params = "";
            // 把url从服务端响应的数据,放到#result选择器中
            // $("#result").load(url);
            $("#result").load(url, function () {
                alert("load finish");
            });

        }



    </script>
</body>
</html>